import type AtComponent from 'taro-ui/types/base'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import { THEME } from '@/constants/theme'
import { toHexColor } from '@/utils/color'

interface TagProps extends AtComponent {
  color?: string
  background?: string
  /**
   * 如果不传递 bgColor ，则使用 alpha 计算背景色
   *
   * @default 0.1
   */
  alpha?: number
  customStyle?: React.CSSProperties
}

export function Tag({
  color = THEME.primary,
  background,
  alpha = 0.2,
  className,
  customStyle,
  children,
}: TagProps) {
  const backgroundValue = background || toHexColor(color, alpha)
  return (
    <View
      className={classNames('inline-flex items-center', 'px-1', 'rounded', className)}
      style={{ background: backgroundValue, color, ...customStyle }}
    >
      {children}
    </View>
  )
}
